<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@page import="be.scond.cartpool.model.Group"%>
<%@page import="java.util.List"%>
<%@page import="javax.jdo.PersistenceManager"%>
<%@page import="be.scond.utils.PMF"%>

<%@page import="be.scond.cartpool.model.User"%>
<%@page import="be.scond.cartpool.CartpoolAPI_debugServlet"%>
<%@page import="be.scond.cartpool.CartpoolAPIServlet"%><html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"/>
		<title>Cartpool - ShoppingCart pooling made easy</title>

		<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
		<link rel="stylesheet" type="text/css" media="all" href="css/visualLayout.css" />
    
		<!--[if IE 6]>
			<link rel="stylesheet" href="css/IE.css" type="text/css" />
		<![endif]-->  
	
		<script src="js/jquery-1.3.2.js" type="text/javascript"></script>		
		<script src="js/htmlEncode.js" type="text/javascript"></script>			
		<script src="js/jquery.jsrepeater-1.1.js" type="text/javascript"></script>
		<script src="js/XmlUtils.js" type="text/javascript"></script>	
		<script src="js/jquery.form.js" type="text/javascript"></script>	
		<script src="js/kmutolleAPI.js" type="text/javascript"></script>	
		<script src="js/jquery.md5.js" type="text/javascript"></script>	
		<script src="js/ddaccordion.js" type="text/javascript"></script>	

		<style type="text/css" media="all">
			.container_12 {
				/*background: #fff url(images/12_col.gif) repeat-y;*/
			}
		   </style>
			
	</head>
	<body>
		
		<script type="text/javascript">
			$(document).ready(onDocumentReady);


			//Initialize first demo:
			ddaccordion.init({
				headerclass: "acc_category", //Shared CSS class name of headers group
				contentclass: "acc_product", //Shared CSS class name of contents group
				revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
				mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
				collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
				defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
				onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
				animatedefault: false, //Should contents open by default be animated into view?
				persiststate: true, //persist state of opened contents within browser session?
				toggleclass: ["closedProduct", "openProduct"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
				togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
				animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
				oninit:function(expandedindices){ //custom code to run when headers have initalized
					//do nothing
				},
				onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
					//do nothing
				}
			});
			
			function onDocumentReady(){	
				getAllGroups();				
			}

			function showRegister() {
				$("#pageHolder").load("register.jsp");
			}
			
			function showLogin() {
				$("#pageHolder").load("login.jsp");
			}

			function getAllGroups(){
				var postVars = new Object();
				postVars.action = "ACTION_RETURN_GROUPS";
				$.post("cartpool", postVars, onGotAllGroups);		
			}
			function onGotAllGroups(data){
				var groups = data.firstChild.getElementsByTagName('group');
				var simpleObjectGroups = nodeToObject(groups);
				$('#groupRepeater').fillTemplate(simpleObjectGroups);
				showFeedback(data);
			}
			
			function getShoppingLists(groupName){
				var postVars = new Object();
				postVars.action = "ACTION_RETURN_SHOPPINGLISTS";
				postVars.groupName = groupName;
				postVars.from = 0;
				postVars.to = 10;
				$.post("cartpool", postVars, onGotAllShoppingLists);		
			}
			function onGotAllShoppingLists(data){				
				var lists = data.firstChild.getElementsByTagName('shoppingList');
				var simpleObjectLists = nodeToObject(lists);
				$('#shoppingListRepeater').fillTemplate(simpleObjectLists);				
				showFeedback(data);
			}


			function getAllUsers(groupName){
				var postVars = new Object();
				postVars.action = "ACTION_RETURN_USERS";
				postVars.groupName = groupName;
				$.post("cartpool", postVars, onGotAllUsers);		
			}
			function onGotAllUsers(data){				
				var users = data.firstChild.getElementsByTagName('user');
				var simpleObjectUsers = nodeToObject(users);
				simpleObjectUsers.sort(sortBySaldo);
				$('#userSaldoRepeater').fillTemplate(simpleObjectUsers);
				showFeedback(data);
			}

			function deleteGroup(name){
				var postVars = new Object();
				postVars.action = "ACTION_DELETE_GROUP";
				postVars.groupName = name;
				$.post("cartpool", postVars, onGroupDeleted);
			}
			function onGroupDeleted(data){
				getAllGroups();
				showFeedback(data);
			}

			function deleteUser(key){
				var postVars = new Object();
				postVars.action = "ACTION_DELETE_USER";
				postVars.userKey = key;
				$.post("cartpool", postVars, onUserDeleted);
			}
			function onUserDeleted(data){
				getAllUsers($("#selectedGroup").html());
				showFeedback(data);
			}
			
			function updateQuickList(){
				var postVars = new Object();
				postVars.action = "ACTION_LOGIN";
				postVars.email = $("#selectedUser").html();
				postVars.password = $.md5($("#selectedPassword")[0].value);
				postVars.groupName = $("#selectedGroup").html();
				$.post("cartpool", postVars, onQuickListResult);
			}
			function onQuickListResult(data){
				var users = data.firstChild.getElementsByTagName('user');
				var simpleObjectUsers = nodeToObject(users);
				simpleObjectUsers.sort(sortBySaldo);
				$('#userSaldoRepeater').fillTemplate(simpleObjectUsers);

				var shoppingLists = data.firstChild.getElementsByTagName('shoppingList');
				var simpleObjectShoppingLists = nodeToObject(shoppingLists);
				$('#shoppingListRepeater').fillTemplate(simpleObjectShoppingLists);	
				
				var orders = data.firstChild.getElementsByTagName('order');
				var simpleObjectOrders = nodeToObject(orders);
				$('#ordersRepeater').fillTemplate(simpleObjectOrders);

				showFeedback(data);		
			}

			function sortBySaldo(a, b) {
			    var x = parseInt(a.saldo, 10);
			    var y = parseInt(b.saldo, 10);
			    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
			}
	


			
			function showFeedback(data){
				if(data.firstChild.getElementsByTagName('notice')[0]){
					var notice = data.firstChild.getElementsByTagName('notice')[0].firstChild.nodeValue;
					$("#feedback").html(notice);
				}
				if(data.firstChild.getElementsByTagName('succes')[0]){
					var succes = data.firstChild.getElementsByTagName('succes')[0].firstChild.nodeValue;
					$("#feedback").html(succes);
				}
				if(data.firstChild.getElementsByTagName('error')[0]){
					var error = data.firstChild.getElementsByTagName('error')[0].firstChild.nodeValue;
					$("#feedback").html(error);
				}
				
				$("#logger").append(htmlEncode(toXMLString(data), true) + "<br/>");
			}

			function createShoppingList(){
				var postVars = new Object();
				postVars.action = "ACTION_CREATE_SHOPPINGLIST";
				postVars.email = $("#selectedUser").html();
				postVars.groupName = $("#selectedGroup").html();
				$.post("cartpool", postVars, onCreateShoppingListResult);
			}
			function onCreateShoppingListResult(data){
				showFeedback(data);
				getAllUsers($("#selectedGroup").html());
				getShoppingLists($("#selectedGroup").html());
			}

			
			function getOrders(){
				var postVars = new Object();
				postVars.action = "ACTION_RETURN_ORDERS";
				postVars.key = $('#selectedListKey').html();
				$.post("cartpool", postVars, onGetOrdersResult);
			}
			function onGetOrdersResult(data){
				var orders = data.firstChild.getElementsByTagName('order');
				var simpleObjectOrders = nodeToObject(orders);
				$('#ordersRepeater').fillTemplate(simpleObjectOrders);
				showFeedback(data);
			}

			function closeList(key){
				var postVars = new Object();
				postVars.action = "ACTION_CLOSE_SHOPPINGLIST";
				postVars.key = key;
				postVars.email = $("#selectedUser").html();
				postVars.groupName = $("#selectedGroup").html();
				$.post("cartpool", postVars, onCloseShoppingListResult);
			}
			function onCloseShoppingListResult(data){
				onLoginResult(data);
			}

			
			function createOrderClick(product, price){
				var postVars = new Object();
				postVars.action = "ACTION_CREATE_ORDER";
				postVars.email = $("#selectedUser").html();
				postVars.groupName = $("#selectedGroup").html();
				postVars.listKey = $('#selectedListKey').html();
				
				postVars.product = product;
				postVars.quantity = "1";
				postVars.price = price;
				
				$.post("cartpool", postVars, onCreateOrderResult);
			}
			function onCreateOrderResult(data){
				showFeedback(data);
				getOrders();
			}
			
			function deleteOrder(key){
				var postVars = new Object();
				postVars.action = "ACTION_DELETE_ORDER";
				postVars.key = key;
				$.post("cartpool", postVars, onOrderDeleted);
			}
			function onOrderDeleted(data){
				showFeedback(data);
				getOrders();
			}

			function updateOrderPrice(textInput, key){
				var postVars = new Object();
				postVars.action = "ACTION_UPDATE_ORDER";
				postVars.key = key;
				postVars.price = textInput.value;
				$.post("cartpool", postVars, onOrderPriceUpdated);
			}
			function onOrderPriceUpdated(data, textStatus){
				var keyString = data.firstChild.getElementsByTagName('key')[0].firstChild.nodeValue;
				$("#price_" + keyString)[0].value = data.firstChild.getElementsByTagName('price')[0].firstChild.nodeValue;
				showFeedback(data);
			}
			
			function updateOrderQuantity(textInput, key){
				var postVars = new Object();
				postVars.action = "ACTION_UPDATE_ORDER";
				postVars.key = key;
				postVars.quantity = textInput.value;
				$.post("cartpool", postVars, onOrderQuantityUpdated);
			}
			function onOrderQuantityUpdated(data, textStatus){
				var keyString = data.firstChild.getElementsByTagName('key')[0].firstChild.nodeValue;
				$("#quantity_" + keyString)[0].value = data.firstChild.getElementsByTagName('quantity')[0].firstChild.nodeValue;
				showFeedback(data);
			}
			
			function updateOrderProduct(textInput, key){
				var postVars = new Object();
				postVars.action = "ACTION_UPDATE_ORDER";
				postVars.key = key;
				postVars.product = textInput.value;
				$.post("cartpool", postVars, onOrderQuantityUpdated);
			}
			function onOrderQuantityUpdated(data, textStatus){
				var keyString = data.firstChild.getElementsByTagName('key')[0].firstChild.nodeValue;
				$("#product_" + keyString)[0].value = data.firstChild.getElementsByTagName('product')[0].firstChild.nodeValue;
				showFeedback(data);
			}

			function showDelete(s){
				//alert(s);
				if(s == "true"){
					return '&nbsp;';
				}else{
					return '<img src="images/delete.gif" alt="delete">';
				}
			}
		</script>

		
		<div class="container_12">
			<div class="grid_3">
				<a href="index.html"><img src="images/logo.png" id="imgLogo" alt="SmosKas" /></a>
			</div>

			<div class="prefix_0 grid_12 clearfix">
				<div id="dividerMainHorTop">&nbsp;</div>
			</div>
			<!--
			<div class="prefix_1 grid_10">				
				<a href="http://xkcd.com/"><img alt="XKCD rulez" src="http://imgs.xkcd.com/comics/exploits_of_a_mom.png" style="padding:10px;"></a>
			</div>	
			-->
	
			<div class="grid_7" id="feedback" style="font-weight:bold; color:#FF0000; padding:15px;">hallo</div>
			
			<div class="grid_7">				

					
				<div class="prefix_0 grid_7 alpha">
					<br/><br/>
					<span onclick="showRegister();"><input type="button" value="register"></span>
					<span onclick="showLogin();"><input type="button" value="login"></span>
					<span onclick="updateQuickList();"><input type="button" value="update quick list (fill in password for user)"></span>
				</div>
	
				<div class="grid_7">
					<br/>
					<div id="dividerMainHorTop">&nbsp;</div>
					<br/>
				</div>
				
				
				<div class="grid_7 alpha" id="pageHolder"></div>
				
				<div class="grid_7 alpha"><h2><span id="selectedGroup">select a group</span>&nbsp;<input type="button" id="btn_createShoppingList" onclick="createShoppingList();" value="create shoppingList" /></h2></div>
				
				<div class="grid_7" style="font-weight: bold;">
					<div style="width:200px; float:left;">name</div>
					<div style="width:120px; float:left;">password</div>
					<div style="width:80px; float:left;">confirmed</div>
					<div style="text-align:right;">&nbsp;</div>
					<div id="dividerMainHorTop">&nbsp;</div>
				</div>
				<div class="grid_7" id="groupRepeater">
					<div class="%{evenRow:oddRow}">
						<div style="width:200px; float:left;"><b style="cursor: pointer;" onclick="$('#selectedGroup').html('${name}'); getAllUsers('${name}'); getShoppingLists('${name}');">${name}</b></div>
						<div style="width:120px; float:left;">${password}</div>
						<div style="width:80px; float:left;">${confirmed}</div>
						<div style="text-align:right;"><a href='#' onclick="deleteGroup('${name}')"><img src="images/delete.gif" alt="delete"></a>&nbsp;</div>
					</div>
				</div>
			
			
				<div class="grid_7 alpha" style="padding-top:20px;"><h2><span id="selectedUser">select a user:</span> - <input id="selectedPassword" type="password" value="pass"></h2></div>
				<div class="grid_7" style="font-weight: bold;">
					<div style="width:80px; float:left;">saldo</div>
					<div style="width:210px; float:left;">name</div>
					<div style="width:60px; float:left;">email</div>
					<div style="text-align:right;">&nbsp;</div>
					<div id="dividerMainHorTop">&nbsp;</div>
				</div>
				<div class="grid_7" id="userSaldoRepeater">
					<div class="%{evenRow:oddRow}">
						<div style="width:80px; float:left;">&#128; ${saldo}</div>
						<div style="width:210px; float:left;"><b style="cursor: pointer;" onclick="$('#selectedUser').html('${email}');">${name}</b></div>
						<div style="width:60px; float:left;">${email}</div>
						<div style="text-align:right;">
							<a href='#' onclick="deleteUser('${key}')"><img src="images/delete.gif" alt="delete" /></a>&nbsp;
						</div>
					</div>
				</div>
				
				<div class="grid_7 alpha" style="padding-top:20px;"><h2><span id="selectedList">select a list</span><span style="display:none;" id="selectedListKey"></span></h2></div>
				<div class="grid_7" style="font-weight: bold;">
					<div style="width:220px; float:left;">date</div>
					<div style="width:110px; float:left;">payedAmount</div>
					<div style="width:70px; float:left;">closed</div>
					<div style="text-align:right;">&nbsp;</div>
					<div id="dividerMainHorTop">&nbsp;</div>
				</div>
				<div class="grid_7" id="shoppingListRepeater">
					<div class="%{evenRow:oddRow}">
						<div style="width:220px; float:left;"><b style="cursor: pointer;" onclick="$('#selectedList').html('${date}'); $('#selectedListKey').html('${key}'); getOrders();">${date}</b></div>
						<div style="width:110px; float:left;">${payedAmount}</div>
						<div style="width:70px; float:left;">${closed}</div>
						<div style="text-align:right;">
							<a href='#' onclick="closeList('${key}')"><img src="images/cart_icon.png" alt="pay"></a>&nbsp;
							${closed:showDelete}
						</div>
					</div>
				</div>

				<div class="grid_7 alpha" style="padding-top:20px;"><h2>Orders</h2></div>
				<div class="grid_7" style="font-weight: bold;">
					<div style="width:80px; float:left;">quantity</div>
					<div style="width:220px; float:left;">product</div>
					<div style="width:130px; float:left;">userName</div>
					<div style="width:40px; float:left;">price</div>
					<div style="text-align:right;">&nbsp;</div>
					<div id="dividerMainHorTop">&nbsp;</div>
				</div>
				<div class="grid_7" id="ordersRepeater">
					<div class="%{evenRow:oddRow}">
						<div style="width:80px; float:left;"><input style="width:20px; height:18px; border:0px; padding:0px; margin:0px;" id="quantity_${key}" onchange="updateOrderQuantity(this, '${key}')" type="text" value="${quantity}" /> x</div>
						<div style="width:220px; float:left;"><input style="width:210px; height:18px; border:0px; padding:0px; margin:0px;" id="product_${key}" onchange="updateOrderProduct(this, '${key}')" type="text" value="${product}" /></div>
						<div style="width:145px; float:left;">${userName}</div>
						<div style="width:60px; float:left;"><input style="width:40px; height:18px; border:0px; padding:0px; margin:0px;" id="price_${key}" onchange="updateOrderPrice(this, '${key}')" type="text" value="${price}" />&nbsp;</div>
						<div style="text-align:right;"><a href='#' onclick="deleteOrder('${key}')"><img src="images/delete.gif" alt="delete"></a>&nbsp;</div>
					</div>
				</div>

			</div>
			<div class="grid_5">				
				Logger: <b style="cursor: pointer;" onmouseup='$("#logger").empty()'>clear</b>
				<div id="logger"></div>
			</div>
			

			<div class="grid_5">
				<a href="#" onClick="ddaccordion.expandone('acc_category', 0); return false">Expand 1st header</a> | <a href="#" onClick="ddaccordion.collapseone('acc_category', 0); return false">Collapse 1st header</a> | <a href="#" onClick="ddaccordion.toggleone('acc_category', 1); return false">Toggle 2nd header</a>
				
				<h3 class="acc_category">Fruit</h3>
				<div class="acc_product">
					<div class="evenRow" onclick="createOrderClick('appels', '0.35');" style="cursor: pointer;">
						<div style="width:220px; float:left;">appels</div>
						<div style="text-align:right;">&#128;&nbsp;0.35.-</div>
					</div>
					<div class="oddRow" onclick="createOrderClick('peren', '0.42');" style="cursor: pointer;">
						<div style="width:220px; float:left;">peren</div>
						<div style="text-align:right;">&#128;&nbsp;0.42.-</div>
					</div>
					<div class="evenRow" onclick="createOrderClick('bananen', '0.50');" style="cursor: pointer;">
						<div style="width:220px; float:left;">bananen</div>
						<div style="text-align:right;">&#128;&nbsp;0.50.-</div>
					</div>
				</div>
				
				<h3 class="acc_category">Drank</h3>
				<div class="acc_product">
					<div class="evenRow" onclick="createOrderClick('fles wijn', '12');" style="cursor: pointer;">
						<div style="width:220px; float:left;">fles wijn</div>
						<div style="text-align:right;">&#128;&nbsp;6.-</div>
					</div>
				</div>
				
				<h3 class="acc_category">Broodjes</h3>
				<div class="acc_product">
					<div class="oddRow" onclick="createOrderClick('smoske kaas', '3');" style="cursor: pointer;">
						<div style="width:220px; float:left;">smoske kaas</div>
						<div style="text-align:right;">&#128;&nbsp;3.-</div>
					</div>
					<div class="evenRow" onclick="createOrderClick('smoske hesp', '4');" style="cursor: pointer;">
						<div style="width:220px; float:left;">smoske hesp</div>
						<div style="text-align:right;">&#128;&nbsp;4.-</div>
					</div>
					<div class="oddRow" onclick="createOrderClick('soya koeken', '5');" style="cursor: pointer;">
						<div style="width:220px; float:left;">soya koeken</div>
						<div style="text-align:right;">&#128;&nbsp;5.-</div>
					</div>
				</div>
			</div>



			<div class="clear">&nbsp;</div> <!-- clearfix op container_12 => left align in IE6 -->
		</div>
	</body>
</html>